/* 村居信息 弹框
* @ 劳兆城 
* @ 2017-08-12*/

<template>
	<interact-model 
		ref="interact-model"
		title="村居信息"
		class="rusticate-model">
		<div class="rusticate-warpper">
			<div class="rusticate-table">
				<table border class="table">
					<tbody>
						<tr>
							<td>村居名称</td>
							<td>{{fliterData('name')}}</td>
							<td>户数</td>
							<td>{{fliterData('door_num')}}</td>
						</tr>
						<tr>
							<td>人口</td>
							<td>{{fliterData('person_num')}}</td>
							<td>面积（平方米）</td>
							<td>{{fliterData('area')}}</td>
						</tr>
						<tr>
							<td>农田数（亩）</td>
							<td>{{fliterData('farm_num')}}</td>
							<td>房屋数</td>
							<td>{{fliterData('house_num')}}</td>
						</tr>
						<tr>
							<td>描述</td>
							<td>{{fliterData('description')}}</td>
							<td>监测人名</td>
							<td>{{fliterData('monitor_name')}}</td>
						</tr>
						<tr>
							<td>监测人联系方式</td>
							<td>{{fliterData('monitor_phone')}}</td>
							<td>监测主要迹象</td>
							<td>{{fliterData('monitor_obj')}}</td>
						</tr>
						<tr>
							<td>监测方法和手段</td>
							<td>{{fliterData('monitor_method')}}</td>
							<td>预报判据</td>
							<td>{{fliterData('yubao_basic')}}</td>
						</tr>
						<tr>
							<td>村级责任人</td>
							<td>{{fliterData('resp_village')}}</td>
							<td>村级责任人联系方式</td>
							<td>{{fliterData('resp_village_phone')}}</td>
						</tr>
						<tr>
							<td>撤离路线</td>
							<td>{{fliterData('leave_path')}}</td>
							<td>镇级责任人</td>
							<td>{{fliterData('resp_town')}}</td>
						</tr>
						<tr>
							<td>镇级责任人联系方式</td>
							<td>{{fliterData('resp_town_phone')}}</td>
							<td>区三防值班电话</td>
							<td>{{fliterData('resp_area_phone')}}</td>
						</tr>
						<tr>
							<td>安置地点</td>
							<td>{{fliterData('install_place')}}</td>
							<td>安置责任人</td>
							<td>{{fliterData('install_name')}}</td>
						</tr>
						<tr>
							<td>安置责任人联系方式</td>
							<td>{{fliterData('install_phone')}}</td>
							<td>救护单位</td>
							<td>{{fliterData('rescue_place')}}</td>
						</tr>
						<tr>
							<td>救护责任人</td>
							<td>{{fliterData('rescue_name')}}</td>
							<td>救护责任人联系方式</td>
							<td>{{fliterData('rescue_phone')}}</td>
						</tr>
						<tr>
							<td>电话</td>
							<td>{{fliterData('telephone')}}</td>
							<td>镇</td>
							<td>{{fliterData('town')}}</td>
						</tr>
						<tr>
							<td>经度</td>
							<td>{{fliterData('lng')}}</td>
							<td>纬度</td>
							<td>{{fliterData('lat')}}</td>
						</tr>
						<tr>
							<td>社区名</td>
							<td>{{fliterData('community')}}</td>
							<td>注意事项</td>
							<td>{{fliterData('note')}}</td>
						</tr>
					</tbody>
				</table>
				<div class="a">
					<div class="title">预案路径:</div>
					<div class="content">
						<a :href="fliterData('plan_path')">{{fliterData('plan_path')}}</a>
					</div>
				</div>
				<div class="a">
					<div class="title">预案文件名:</div>
					<div class="content" v-html="fliterData('plan_name')"></div>
				</div>
			</div>
		</div>
	</interact-model>
</template>

<script>
	import {
		interactModelMixin,
		aPictureModelMixin
	} from 'common/js/mixins'

export default {
		mixins: [
			interactModelMixin,
			aPictureModelMixin
		],
		methods: {
			show (feature, layerNames) {
				this.$refs['interact-model'].showModel()
			if (layerNames) {
					this.data = feature.get('content').info || {}
			} else {
					this.data = feature.get('content') || {}
			}
			}
		}
	}
</script>

<style lang="scss">
	.rusticate-model {
		width: 600px;
		height: 450px;
		.rusticate-warpper {
			width: 100%;
			height: 100%;
			position: relative;
			padding: 5px;
			overflow: auto;
			.rusticate-table {
				width: 100%;
				height: 100%;
				.table {
					width: 100%;
					font-size: 14px;
					border: 1px solid #ddd;
					td {
						width: 25%;
						padding: 5px;
					}
				}
				.a {
					display: flex;
					align-items: center;
					font-size: 12px;
					padding: 5px;
					.title {
						width: 70px;
						margin-right: 5px;
						text-align: right;
					}
					.content {
						flex: 1;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}
</style>